<template>
    <div>
        <common-header></common-header>

        <div style="width:1200px; margin: 50px auto;">
            <div class="row">
                <div class="col-md-3">
                    <!-- 账号安全侧栏 -->
                    <safe-nav :activeId="activeId"></safe-nav>
                </div>
                <div class="col-md-9">
                    <el-card class="accountCard" shadow="hover">
                        <div class="titleWrap">
                            <div>安全设置</div>
                        </div>
                        <div class="myCollapse">
                            <el-collapse v-model="activeName" accordion>
                                <!-- 手机绑定 -->
                                <el-collapse-item>
                                    <template slot="title">
                                        <div class="myTitle">
                                            <div class="left">手机</div>
                                            <div class="middle">
                                                <span class="detail">159****3686</span> 
                                                <span class="desc"> 手机号码仅自己可见，可用手机号码登录EduCoder</span>
                                            </div>
                                            <div class="right">
                                                <el-button type="text" size="mini">更换</el-button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="myForm">
                                        <el-form  label-position="right" label-width="100px">
                                            <el-form-item size="small" label="你的手机号：">
                                                <el-input placeholder="请输入你的手机号"></el-input>
                                            </el-form-item>
                                            <el-form-item size="small" label="手机验证码：">
                                                <el-input style="width:73%;" placeholder="请输入手机获取的验证码"></el-input>
                                                <div class="login-code" >
                                                    <el-button>获取验证码</el-button>
                                                </div>
                                            </el-form-item>
                                            <el-form-item style="">
                                                <el-button type="primary" size="mini" style="margin-right:10px;">保 存</el-button>
                                                <el-button size="mini"  @click="isForm = false">取 消</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-collapse-item>
                                                            
                                <!-- 邮箱绑定 -->
                                <el-collapse-item>
                                    <template slot="title">
                                        <div class="myTitle">
                                            <div class="left">邮箱</div>
                                            <div class="middle">
                                                <span class="detail">未绑定</span> 
                                                <span class="desc"> 邮箱账号仅自己可见，可用于邮箱账号登录EduCoder</span>
                                            </div>
                                            <div class="right">
                                                <el-button type="text" size="mini">立即绑定</el-button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="myForm">
                                        <el-form  label-position="right" label-width="100px">
                                            <el-form-item size="small" label="邮箱地址：">
                                                <el-input placeholder="请输入邮箱地址"></el-input>
                                            </el-form-item>
                                            <el-form-item size="small" label="邮箱验证码：">
                                                <el-input style="width:73%;" placeholder="请输入邮箱获取的验证码"></el-input>
                                                <div class="login-code" >
                                                    <el-button>获取验证码</el-button>
                                                </div>
                                            </el-form-item>
                                            <el-form-item style="">
                                                <el-button type="primary" size="mini" style="margin-right:10px;">保 存</el-button>
                                                <el-button size="mini"  @click="isForm = false">取 消</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-collapse-item>

                                <!-- 密码修改 -->
                                <el-collapse-item>
                                    <template slot="title">
                                        <div class="myTitle">
                                            <div class="left">密码</div>
                                            <div class="middle">
                                                <span class="detail">**********</span> 
                                                <span class="desc"> 用于保护账户信息和登录安全</span>
                                            </div>
                                            <div class="right">
                                                <el-button type="text" size="mini">修改</el-button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="myForm">
                                        <el-form :model="updatePwdForm" :rules="updatePwdFormRules" ref="updatePwdFormRef" label-position="right" label-width="100px">
                                            <el-form-item size="small" label="旧密码：" prop="oldPassword" >
                                                <el-input placeholder="请输入旧密码" v-model="updatePwdForm.oldPassword"></el-input>
                                            </el-form-item>
                                            <el-form-item size="small" label="新密码：" prop="password">
                                                <el-input show-password placeholder="请设置 6 ~ 16 位密码，区分大小写" v-model="updatePwdForm.password"></el-input>
                                            </el-form-item>
                                            <el-form-item size="small" label="确认密码：" prop="passwordAgain">
                                                <el-input show-password placeholder="请再次输入新密码" v-model="updatePwdForm.passwordAgain"></el-input>
                                            </el-form-item>
                                            <el-form-item style="">
                                                <el-button type="primary" size="mini" style="margin-right:10px;" @click="updatePwd">保 存</el-button>
                                                <el-button size="mini"  @click="isForm = false">取 消</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </el-card>
                    <div style="color: rgb(152, 152, 152);margin:10px 0 0 20px;font-size:12px;">
                        * 我们确保你所提供的信息均处于严格保密状态，不会泄露
                    </div>
                </div>
            </div>
        </div>

        <common-footer></common-footer>
    </div>
</template>

<script>
import CommonHeader from '../../components/Show/CommonHeader'
import CommonFooter from '../../components/Show/CommonFooter'
import SafeNav from '../../components/Safe/SafeNav'
export default {
    components:{
        CommonHeader,
        CommonFooter,
        SafeNav
    },
    data() {
        // 重新输入密码验证
        const repwdCheck = async(rule, value, callback) => {
            if(value !== this.updatePwdForm.password) {
                return callback(new Error('两次密码输入不一致！'));
            } else {
                callback()
            }
        }
      return {
        activeId: 2,
        activeName: '1',

        // 更改密码表单
        updatePwdForm:{
            oldPassword: '',
            password: '',
            passwordAgain: ''
        },
        updatePwdFormRules: {
            oldPassword: [
                { required: true, message: '请输入旧密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在6-15字符之间', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在6-15字符之间', trigger: 'blur' }
            ],
            passwordAgain: [
                { required: true, message: '请输入确认密码', trigger: 'blur' },
                { validator: repwdCheck, trigger: 'blur'},
                { min: 6, max: 15, message: '长度在6-15字符之间', trigger: 'blur' }
            ],
        }
      };
    },
    methods:{
        // 修改密码
        updatePwd(){
            this.$refs.updatePwdFormRef.validate(async (valid) => {
                if(valid){
                    var query = {
                        id: this.$store.state.user.userInfo.id,
                        password: this.updatePwdForm.password,
                        oldPassword: this.updatePwdForm.oldPassword
                    }
                    const {data: res} = await this.$http.post('/user/updatePassword', query)
                    console.log('密码修改:', res)
                    if(res.code === 200) {
                        this.$message.success('密码修改成功!')
                        
                    }
                    else if(res.code === 2000){
                        return this.$message.error('旧密码错误')
                    }
                    this.$refs.updatePwdFormRef.resetFields()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.accountCard{
    min-height: 420px;
    padding: 10px 30px;
    .titleWrap{
        display: flex;
        justify-content: space-between;
    }
    .myCollapse{
        margin-top: 25px;
        .el-collapse{
            border-top: none;
            // /deep/.el-collapse-item__arrow{
            //     display: none;
            // }
            /deep/.el-collapse-item__content{
                padding-bottom: 0;
            }
        }
        .myTitle{
            width: 100%;
            // display: flex;
            // justify-content: space-between;
            padding: 0 5px 0 20px;
            // border:1px solid red;
            .left{
                color: #999;
                float: left;
                margin-right: 90px;
            }
            .middle{
                float: left;
                .detail{
                    color: #05101A;
                    margin-right: 15px;
                    font-weight: normal;
                }
                .desc{
                    color: #CDCDCD;
                }
            }
            .right{
                float: right;
            }
        }
        .myForm{
            .login-code {
                float: right;
                cursor: pointer;
            }
            .el-form{
                width: 60%;
                margin: 15px 0 0 100px;
                /deep/.el-form-item__label{
                    color: #999999;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>